<template>
  <div v-if="screenArr && screenArr.length > 0">
    <div class="swiper headSwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in screenArr" :key="index">
          <div class="screen-sty">
            <div class="create-avatar" :style="{ background: calculateBg(item[0]) }">
              {{ calculateText(item[0]) }}
            </div>
            <span class="text">{{ item[0] }} <span>{{ item[1] }}</span> {{ item[2] }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
import { mapState } from "vuex";
import { barrageList } from "@/api/activity";
import { avatarBg } from "@/common/common";
export default {
  data() {
    return {
      screenArr: [],
      carouselVal: 0,
      headSwiper: '',
      autoplayConfig: {
        enabled: false,
        delay: 5000
      }
    }
  },
  computed: {
    ...mapState({
      config: (state) => state.config.config
    })
  },
  watch: {
    'screenArr.length': {
      immediate: false,
      handler(newLength) {
        if (newLength > 1) {
          this.autoplayConfig.enabled = true;
        } else {
          this.autoplayConfig.enabled = false;
        }
        if (this.headSwiper) {
          if (this.autoplayConfig.enabled) {
            this.headSwiper.params.autoplay = {
              delay: this.autoplayConfig.delay,
              disableOnInteraction: false
            };
            this.headSwiper.autoplay.start();
          } else {
            this.headSwiper.autoplay.stop();
          }
        }
      }
    }
  },
  created() {
    this.getBarrageList();
  },
  methods: {
    getBarrageList() {
      barrageList().then((res) => {
        this.screenArr = res.result;
        this.initSwiper();
      })
    },
    // 初始化swiper
    initSwiper() {
      this.$nextTick(() => {
        this.headSwiper = new Swiper(".headSwiper", {
          effect: "cards",// 切换效果
          cubeEffect: {
            slideShadows: false,
            shadow: false, // 也可以尝试禁用阴影
          },
          allowTouchMove: false,
          parallax: true,
          autoplay: this.autoplayConfig.enabled ? {
            delay: this.autoplayConfig.delay,
            disableOnInteraction: false
          } : false,
          direction: 'vertical',// horizontal-水平  vertical-垂直
          initialSlide: 0,// 初始化显示第一个
          speed: 2000,// 单次的切换速度
          loop: true,// 循环
          spaceBetween: 0,
        });
      })
    },
    calculateBg(email) {
      const result = avatarBg(email);
      return result.bg;
    },
    calculateText(email) {
      const result = avatarBg(email);
      return result.text;
    },
  }
}
</script>

<style lang="less" scoped>
:deep(.swiper-container-cube .swiper-cube-shadow) {
  background: none;
}

.headSwiper {
  width: 100%;
  height: 80px;
  overflow: hidden;

  .swiper-wrapper {

    .swiper-slide {
      width: 100%;

      .screen-sty {
        padding: 4px 8px;
        background: rgba(0, 0, 0, 0.62);
        border-radius: 25px 0 0 25px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .text {
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 16px;
          white-space: nowrap;
          margin-left: 8px;

          span {
            color: #FFCC00;
          }
        }

        .create-avatar {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          font-weight: 600;
          font-size: 14px;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
